<template>
  <div class="setSendInfo flex-column">
    <div class="infoTitle" v-if="showTitle">选择客服账号</div>
    <div class="description" v-if="description">{{description}}</div>
    <div class="selection" ref="selectionList">
      <div :class="['chooseService', 'pointer', showFilterService && 'expendList']"
      @click="toggleServiceList">
      请选择客服账户
      </div>
      <div class="selection-list flex-column" v-if="showFilterService">
        <ul class="scrollAuto autoGrow checkList">
          <li :class="['serviceItem', 'listItem', 'flex-row']" v-for="(item) in services" :key="item.id">
            <label class="list-label flex-row">
              <div class="flex-row autoGrow" style="overflow:hidden">
                <div class="list-item-avatar">
                  <el-avatar shape="square" class="listItemAvatar" :src="item.src||item.avatar||defaultAvatar" :size="40" fit="cover" />
                </div>
                <div class="service-item-info list-item-info flex-column">
                  <div class="serviceItemTopInfo listItemTopInfo flex-row">
                      <div class="serviceItemName listItemName textEllipsis">{{item.nick}}</div>
                  </div>
                  <div class="serviceItemBottomInfo list-item-bottom-info flex-row">
                    <span v-if="item.friendcount||item.friendcount==0">好友{{item.friendcount}}</span>
                    <span v-if="item.groupCount||item.groupCount==0">群{{item.groupCount}}</span>
                  </div>
                </div>
              </div>
              <input :checked="checkedid.includes(item.id)" type="checkbox" style="margin-left: 6px;" @change="changeServiceChecked(item,$event)">
            </label>
          </li>
        </ul>
      </div>
    </div>
    
    <div v-if="showList" class="serviceListChecked flex-column">
      <ul class="scrollAuto autoGrow checkedList">

        <li :class="['serviceItem', 'listItem', 'flex-row']" v-for="(item) in filteredServices" :key="item.id">
            <label class="list-label flex-row">
              <div class="flex-row autoGrow">
              <div class="list-item-avatar">
                <el-avatar shape="square" class="listItemAvatar" :src="item.src||item.avatar||defaultAvatar" :size="40" fit="cover" />
              </div>
              <div class="service-item-info list-item-info flex-column">
                <div class="serviceItemTopInfo listItemTopInfo flex-row">
                    <div class="serviceItemName listItemName textEllipsis">{{item.nick}}</div>
                </div>
                <div class="serviceItemBottomInfo list-item-bottom-info flex-row">
                  <span v-if="item.friendcount||item.friendcount==0">好友{{item.friendcount}}</span>
                  <span v-if="item.groupCount||item.groupCount==0">群{{item.groupCount}}</span>
                </div>
              </div>
              </div>
            </label>
          </li>

      </ul>
    </div>
    <slot></slot>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import ServiceListItem from '@/components/serviceListItem';
export default {
  name: 'chooseServiceAccount',
  props:{

  },
  data() {
    return {
      showFilterService: false,
      filteredServices: [],
      checkedWxid:[],
      checkedid:[]
    }
  },
  mounted(){
    document.addEventListener('click',this.clickHide)
  },
  destroyed(){
    document.removeEventListener('click',this.clickHide)
  },
  created(){
      this.checkedWxid = this.defalutcheckedWxid||[]
  },
  watch: {
    defalutcheckedWxid(val,oldVal){
      if(val && val.length !== oldVal.length){
        this.checkedWxid = val
        this.checkedid = val
      }
    },
    services(val) {
      if (this.selectAll) {
        val.map(s=>{
          this.filteredServices.push(s)
          this.checkedWxid.push(s.wxid)
        })
      }
    },
    selectAll(val) {
      if (val) {
        this.filteredServices = this.services
        this.checkedWxid = this.services.map(s=>s.wxid)
      } else {
        this.filteredServices = []
        this.checkedWxid = []
      }
    },
    filteredServices(val) {
      // this.checkedServices = val
      // this.$emit("update:serviceChange", val);
      this.$emit('serviceChange', val);
    },
    
  },
  props: {
    defalutcheckedWxid: {
      type: Array,
      default(){
        return []
      }
    },
    selectAll: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: true
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    description: {
      type: String,
      default: ''
    },
    showList: {
      type: Boolean,
      default: true
    },
    serviceChange:{
      type: Array,
      default:()=>{return []}
    }
  },
  components: {
    ServiceListItem
  },
  computed: {
    ...mapState(['services'])
  },
  methods: {
    clickHide(e){
      const eventPath = e.path || e.composedPath()
      if(!eventPath.includes(this.$refs['selectionList'])){
        this.showFilterService = false  
      }
    },
    clear(){
      this.showFilterService = false
      this.checkedid = []
      this.filteredServices = []
      this.checkedWxid = []
    },
    changeServiceChecked({id}, e) {
      if (e.target.checked) {
        if (!this.multiple && this.checkedid.length > 0) {
          this.checkedid.shift();
        }
        this.checkedid.push(id)
      } else {
        this.checkedid = this.checkedid.filter(wxid=>wxid!=id)
      }
      this.filteredServices = this.services.filter(item=>this.checkedid.indexOf(item.id)>-1)
      if(!this.multiple)this.showFilterService = false
    },
    toggleServiceList() {
      this.showFilterService = !this.showFilterService
    },
  }
}
</script>
<style scoped>
.selection{
  position: relative;

}
.selection-list{
  position: absolute;
  z-index: 9999;
  width: 180px;
  max-height: 266px;
  margin: 0 24px 0 24px;
  background: #fff;
  border: 1px solid #ccc;
  align-items: center;
}
.list-item-avatar{
  width: 40px;
  height: 40px;
  margin-right: 4px;
}
.list-item-avatar img{
    width: 100%;
    border-radius: 3px;
}
.list-item-info{
  flex-grow: 1;
  justify-content: space-between;
  min-width: 0;
}
.list-item-name{
  font-size: 14px;
  padding-right: 20px;
  background-size: 15px 15px;
  background-position: center right;
  background-repeat: no-repeat;
  width: fit-content;
  margin-bottom: 6px;
}
.list-item-bottom-info {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
}
.list-label{
  width: 100%;
  align-items: center;
  /* flex:1 */
}
.listItemName{
  padding: 0
}
</style>